<!-- 核销记录 -->
<template>
	<view>
		<!-- 头部背景 -->
		<view class="headCss"></view>


		<!-- 内容 -->
		<view class="headText" v-for="(item,index) in context" :key="index">
			<view class="text1">
				<view>{{item.serve}}</view>
				<view>{{item.time}}</view>
			</view>
			<view class="div-line" />
			<view class="context">
				订单编号：<text>{{item.id}}</text>
			</view>
			<view class="context">
				位置：<text>{{item.address}}</text>
			</view>
			<view class="context">
				车牌：<text>{{item.carId}}</text>
			</view>
		</view>
		<!-- 空白 好看 -->
		<view style="width: 100rpx; height: 50rpx;" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
				context: [{
						serve: '换胎',
						id: '12345678909435',
						address: '洛阳市道北路32号XXX小区',
						time: '2022-10-12 11:00:00',
						carId: '奔驰FWE4/豫AE24678'
					},
					{
						serve: '拖车',
						id: '12345678909435',
						address: '洛阳市道北路32号XXX小区',
						time: '2022-10-12 11:00:00',
						carId: '奔驰FWE4/豫AE24678'
					}, {
						serve: '搭电',
						id: '12345678909435',
						address: '洛阳市道北路32号XXX小区',
						time: '2022-10-12 11:00:00',
						carId: '奔驰FWE4/豫AE24678'
					}, {
						serve: '拖车',
						id: '12345678909435',
						address: '洛阳市道北路32号XXX小区',
						time: '2022-10-12 11:00:00',
						carId: '奔驰FWE4/豫AE24678'
					}, {
						serve: '搭电',
						id: '12345678909435',
						address: '洛阳市道北路32号XXX小区',
						time: '2022-10-12 11:00:00',
						carId: '奔驰FWE4/豫AE24678'
					}, {
						serve: '拖车',
						id: '12345678909435',
						address: '洛阳市道北路32号XXX小区',
						time: '2022-10-12 11:00:00',
						carId: '奔驰FWE4/豫AE24678'
					}, {
						serve: '搭电',
						id: '12345678909435',
						address: '洛阳市道北路32号XXX小区',
						time: '2022-10-12 11:00:00',
						carId: '奔驰FWE4/豫AE24678'
					},

				]

			}
		},

		methods: {
			searchValue(e) {
				console.log(e);
			}
		}
	}
</script>

<style scoped>
	.headCss {
		background-color: #3385fd;
		width: 750rpx;
		height: 300rpx;
		position: fixed;
	}

	.headText {
		background-color: #fff;
		border-radius: 20rpx;
		width: 710rpx;
		/* min-height: 400rpx; */
		margin-left: 20rpx;
		position: relative;
		/* margin-top: 30rpx; */
	}

	.text1 {
		/* border: 1rpx solid red; */
		padding: 20rpx 0rpx 0rpx 20rpx;
		display: flex;
		align-items: center;

	}

	.text1>view:nth-child(1) {
		color: #3385fd;
		font-size: large;
		width: 20%;
		/* border: 1rpx solid black; */
	}

	.text1>view:last-child {
		width: 80%;
		/* border: 1rpx solid black; */
		font-size: x-small;
		text-align: right;
		color: #9a9a9a;
		padding-right: 20rpx;
	}

	.context {
		margin: 20rpx;
		font-size: small;
		/* padding-bottom: 40rpx; */
	}

	.context>text {
		color: #9a9a9a;
	}

	.context:last-child {
		padding-bottom: 40rpx;

	}


	/* 分割线 */
	.div-line {
		width: 670rpx;
		margin: 20rpx 20rpx 10rpx 20rpx;
		height: 10rpx;
		background-color: #f7f7f7;
		border-radius: 10rpx;
	}
</style>